import React from 'react';
import { EditorState } from 'draft-js';
import OptionBarBtn from '../../../components/option-bar-btn/OptionBarBtn';
import { OptionBarConfig, TypeEditorColor, TypeInlineStyleDict } from '../../../types';
import CustomPopover from '../../../components/popover/CustomPopover';
import CustomColorPicker from '../../../components/color-picker/CustomColorPicker';
import store from '../../../redux/store';
import { setOptionBarConfig } from '../../../redux/optionBarConfig.slice';
import { deepCopy } from '../../../utils';

interface Props {
    onToggleInlineType?: Function
    onPickerEditorColor: (params: TypeEditorColor) => void
    editorState: EditorState
}

interface State {
    optionBarConfig: OptionBarConfig
}

export default class InlineStyleOptionBar2 extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
    };

    public inlineTextColorSheetRef: any = null;
    public inlineBackgroundColorSheetRef: any = null;

    public readonly state: Readonly<State> = {
        optionBarConfig: deepCopy(store.getState().optionBar)
    };

    onToggleInlineType(inlineType: TypeInlineStyleDict) {
        const { onToggleInlineType } = this.props;
        onToggleInlineType && onToggleInlineType(inlineType);
    };

    checkInlineTypeActive(inlineStyleType: TypeInlineStyleDict): boolean {
        const { editorState } = this.props;
        const currentInlineStyle = editorState.getCurrentInlineStyle();
        return currentInlineStyle.has(inlineStyleType);
    }

    _onPickerInlineBgColorColor(e: string) {
        let { optionBarConfig } = this.state;
        optionBarConfig['inlineBgColor'] = e;
        this.setState({ optionBarConfig })
        this.onPickerEditorColor({ pickerType: 'INLINE_BACKGROUND_COLOR', color: e });
    }

    _onPickerInlineTextColorColor(e: string) {
        let { optionBarConfig } = this.state;
        optionBarConfig['inlineTextColor'] = e;
        this.setState({ optionBarConfig })
        this.onPickerEditorColor({ pickerType: 'TEXT_COLOR', color: e });
    };

    onPickerEditorColor(params: TypeEditorColor) {
        const { onPickerEditorColor } = this.props;
        onPickerEditorColor && onPickerEditorColor(params);
    }

    showInlineBackgroundColorSheet() {
        this.inlineBackgroundColorSheetRef.show();
    }

    showInlineTextColorSheet() {
        this.inlineTextColorSheetRef.show();
    }

    toggleInlineBackgroundColor() {
        const { optionBarConfig } = this.state;
        this.onPickerEditorColor({ pickerType: 'INLINE_BACKGROUND_COLOR', color: optionBarConfig.inlineBgColor });
    }

    toggleInlineTextColor() {
        const { optionBarConfig } = this.state;
        this.onPickerEditorColor({ pickerType: 'TEXT_COLOR', color: optionBarConfig.inlineTextColor });
    }

    render() {
        const { optionBarConfig } = this.state;
        return (
            <div className='edit-page-option-row-item flex-col' style={{ width: '170px', paddingLeft: '10px' }}>
                <div className='edit-page-option-row-half text-edit-row-1 flex-row'>
                    <OptionBarBtn
                        icon={<i className='iconfont ghzs-color-jia' />}
                        size={'small'}
                        tooltipTitle={"增加字号"}
                        tooltipDesc={'Shift-Command-(+)'}
                    />
                    <OptionBarBtn
                        icon={<i className='iconfont ghzs-color-jian' />}
                        size={'small'}
                        tooltipTitle={"减少字号"}
                        tooltipDesc={'Shift-Command-(-)'}
                    />
                    <OptionBarBtn
                        icon={<i style={{ fontSize: '18px' }} className='iconfont-1 ghzs-gray-zitidise' />}
                        size={'small'}
                        tooltipTitle={"字符底纹"}
                        tooltipDesc={'Shift-Command-B'}
                    />
                    <OptionBarBtn
                        icon={(
                            <div className='custom-option-bar-icon-container'>
                                <i style={{ fontSize: '16px', marginTop: '-2px' }} className='iconfont ghzs-color-beijingtianchong' />
                                <div
                                    className='custom-option-bar-icon-bgline'
                                    style={{ backgroundColor: optionBarConfig.inlineBgColor ? optionBarConfig.inlineBgColor : '#000' }}
                                ></div>
                            </div>
                        )}
                        size={'small'}
                        onClick={this.toggleInlineBackgroundColor.bind(this)}
                        onClickArrow={this.showInlineBackgroundColorSheet.bind(this)}
                        tooltipTitle={"文字背景"}
                        tooltipDesc={'点击箭头选择文字的背景颜色'}
                        selectEnable
                    />
                </div>
                <div className='edit-page-option-row-half text-edit-row-1 flex-row'>
                    <OptionBarBtn
                        icon={<i className='iconfont ghzs-color-shangbiao' />}
                        size={'small'}
                        onClick={() => this.onToggleInlineType('SUPERSCRIPT')}
                        active={this.checkInlineTypeActive('SUPERSCRIPT')}
                        tooltipTitle={"上标"}
                        tooltipDesc={'Shift-Command-U'}
                    />
                    <OptionBarBtn
                        icon={<i className='iconfont ghzs-color-xiabiao' />}
                        size={'small'}
                        onClick={() => this.onToggleInlineType('SUBSCRIPT')}
                        active={this.checkInlineTypeActive('SUBSCRIPT')}
                        tooltipTitle={"下标"}
                        tooltipDesc={'Shift-Command-S'}
                    />
                    <OptionBarBtn
                        icon={<i style={{ fontSize: '17px' }} className='iconfont-1 ghzs-gray-xiangpica' />}
                        size={'small'}
                        tooltipTitle={"格式擦"}
                        tooltipDesc={'Shift-Command-C'}
                    />
                    <OptionBarBtn
                        icon={(
                            <div className='custom-option-bar-icon-container'>
                                <i style={{ fontSize: '16px', marginTop: '-2px' }} className='iconfont ghzs-color-zitise1' />
                                <div 
                                    className='custom-option-bar-icon-bgline'
                                    style={{ backgroundColor: optionBarConfig.inlineTextColor ? optionBarConfig.inlineTextColor : '#000' }}
                                ></div>
                            </div>
                        )}
                        size={'small'}
                        tooltipTitle={"字体颜色"}
                        tooltipDesc={'设置文字的颜色'}
                        selectEnable={true}
                        onClick={this.toggleInlineTextColor.bind(this)}
                        onClickArrow={this.showInlineTextColorSheet.bind(this)}
                    />
                </div>
                <CustomPopover
                    ref={(c) => this.inlineBackgroundColorSheetRef = c}
                    clientX={800}
                    clientY={96}
                    //@ts-ignore
                    contentRender={(props) =>
                        <CustomColorPicker
                            {...props}
                            onPickerColor={this._onPickerInlineBgColorColor.bind(this)}
                        />
                    }
                />
                <CustomPopover
                    ref={(c) => this.inlineTextColorSheetRef = c}
                    clientX={800}
                    clientY={129}
                    //@ts-ignore
                    contentRender={(props) =>
                        <CustomColorPicker
                            {...props}
                            onPickerColor={this._onPickerInlineTextColorColor.bind(this)}
                        />
                    }
                />
            </div>
        )
    }
}
